<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>期末结转</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_el35yt02d0b.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<link rel="stylesheet" href="js/layer/mobile/need/layer.css" />
		<link rel="stylesheet" href="css/dingdan.css" />
		<link rel="stylesheet" href="css/caiStyle.css" />
	</head>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="mui-col-xs-10">
								<p class="C989696"> <i class="iconfont icon-tishi mR10 Cf59a23"></i>提示：为给您提供更优的系统性能体验，强烈建议每三个月结转一次。结转期间的出入库单据将不可再变更，如需变更，您可使用反结转功能。</p>
							</div>
							<div class="heard-right col-md-2 padding-0 flex">
								<button type="button" class="reverse ">反结转</button>
								<button type="button" class="gjss">结转</button>
							</div>
						</div>
						<!-- 选择订单后显示操作栏 -->
						<div class="caozuo-nav hidden flex">
							<div class="nav-item C989696"><i class="iconfont icon-guanbi hidden"></i>已选择<span class="changeNum">5</span>项</div>
							<div class="nav-item C989696"><i class="iconfont icon-dayin"></i>打印</div>
						</div>
					</nav>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-list" lay-filter="test"></table>
					</div>
				</div>
			</div>
			
			<!-- 新增订单 -->
			<div class="order hidden add-order">
				
			</div>
			
			<!-- 导入订单 -->
			<div class="order hidden import-order">44</div>
			<!-- 结转弹出层 -->
			<div class="advanced-search-model hidden">
				<div class="closeSm"></div>
				<div class="sm-box gs-box">
					<form class="layui-form">
						<div class="gs-box-item">
							<div class="title">结转</div>
							<div class="form-box">
								<div class="col-md-5 padding-0">
									<div class="fb-box"><span class="title end-title">结转截止日期</span><i class="iconfont icon-riqi crkmx_time"></i><input type="text" class="layui-input form-controls" id="test10" placeholder=" - "></div>
								</div>
								<div class="mui-col-xs-12">
									<div class="mui-col-xs-10 pL24">
										执行结转后，结转截止日期当天及之前的库存及成本数据将冻结，此时段内的出入库单据禁止变更。开始结转前，将自动重新核算商品收发成本。
									</div>
								</div>
							</div>
						</div>
						
						<div class="footer-buttom">
							<button class="closegjss" type="button">取消</button>
							<button type="button">确定</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs " lay-event="edit" id="test2">明细</a>
	  </script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
		//显示结转弹出层
			$(".gjss").click(function(){
				$(".advanced-search-model").removeClass("hidden")
			})			
			//隐藏结转弹出层
			$(".closegjss").click(function(){
					$(".advanced-search-model").addClass("hidden")
				})		
			//显示反结转弹出层
				$(".reverse").click(function(){
					layer.open({
					  type: 1,
					   title:"确定",
					  skin: 'layui-layer-demo', //样式类名
					  closeBtn: 0, //不显示关闭按钮
					  anim: 2,
					  shadeClose: true, //开启遮罩关闭
					   btn: ['取消','确定'],
					  content: '“反结转”可作废最近一次的结转，解除此结转期间出入库单据的变更限制。确认立即反结转？',
					  area: ['500px', '300px']
					});
				})
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element
				
				//时间范围选择
				 laydate.render({
		    elem: '#test10',
		  });
				
				// 数据列表渲染
				table.render({
					elem: '#order-list'
					,data:DataArray2// data为数据库查到的数据
					,height: 500
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{field:'userid', title: '序号'}
						,{field:'pwd', title: '结转截止日期'}
						,{field:'sex',  title: '操作日期'}
						,{field:'rank', title: '操作人'}
					]]
					,page: true
				});
				
				//监听行单击事件
				table.on('row(test)', function(obj){
				  console.log(obj.tr) //得到当前行元素对象
				  console.log(obj.data) //得到当前行数据
				  //obj.del(); //删除当前行
				  //obj.update(fields) //修改当前行数据
//				  window.open('ddxq.html?data='+obj.data, '_self');
				});
			});
			
			
		</script>
	</body>
</html>
